<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue'
import { useDataStore } from '@/stores/userDataStore'
import { gameStores } from '@/stores/gameStores'
import { check } from '@/script/check'
import { openWS } from '@/script/ws.js'
import img1 from '@/assets/1.webp'
import img2 from '@/assets/2.webp'
import img3 from '@/assets/3.webp'
import img4 from '@/assets/4.webp'
import img5 from '@/assets/5.webp'
import img6 from '@/assets/6.webp'

// 1~6 随机两个不重复
function getTwoRandomElements(arr) {
    let firstIndex = Math.floor(Math.random() * arr.length);
    let secondIndex;

    do {
        secondIndex = Math.floor(Math.random() * arr.length);
    } while (secondIndex === firstIndex); // 相等才重选

    return [arr[firstIndex], arr[secondIndex]];
}

let arr = [
    { src: img1 },
    { src: img2 },
    { src: img3 },
    { src: img4 },
    { src: img5 },
    { src: img6 }
];
const imgs = ref(getTwoRandomElements(arr))



const gameStore = gameStores()
const CategoryStore = useDataStore()

const style1 = ref({})
const style2 = ref({})

const goback = () => {
    window.location.href = '/hall'
}

// 倒计时
const time = ref()
time.value = gameStore.time
const timer = setInterval(() => {
    if (gameStore.win !== 0) return
    if (time.value > 0) {
        time.value--
        gameStore.time = time.value
    } else {
        gameStore.win = gameStore.isMe ? 2 : 1
        clearInterval(timer)
    }
}, 1000)

const canvas1 = ref()
let context = null

const draw = (i, j) => {
    context.beginPath()
    if (gameStore.isMe) {
        context.fillStyle = 'black'
        style2.value = { opacity: 0 }
        style1.value = { opacity: 1 }
    } else {
        context.fillStyle = 'white'
        setCircles((j / 36) - 1, (i / 36) - 1, 2)
        style2.value = { opacity: 1 }
        style1.value = { opacity: 0 }
    }
    context.arc(i, j, 17, 0, 2 * Math.PI)
    context.fill()

    time.value = 60
    gameStore.time = time.value

    const res = check(circles, (j / 36) - 1, (i / 36) - 1, gameStore.isMe)
    if (res === 1) gameStore.win = 1
    else if (res === 2) gameStore.win = 2

    gameStore.isMe = !gameStore.isMe
}

watch(() => gameStore.enemyDraw, () => {
    draw(gameStore.enemyDraw.x, gameStore.enemyDraw.y)
})

// 棋子数组
let circles = Array.from({ length: 19 }, () => Array(19).fill(0))

const setCircles = (i, j, value) => {
    circles[i][j] = value
    gameStore.gameData = circles
}

watch(canvas1, () => {
    canvas1.value.addEventListener('click', (e) => {
        if (gameStore.win !== 0) return
        let x = e.offsetX
        let y = e.offsetY
        if (x < 19 || x > 701 || y < 19 || y > 701) return
        let ii = Math.floor((x + 18) / 36)
        let jj = Math.floor((y + 18) / 36)
        if (circles[jj - 1][ii - 1] !== 0) return
        let i = ii * 36
        let j = jj * 36
        setCircles(jj - 1, ii - 1, 1)
        draw(i, j)
    })
})

const initCanvas = () => {
    canvas1.value.width = 720
    canvas1.value.height = 720
    context = canvas1.value.getContext('2d')
    for (let i = 1; i < 20; i++) {
        context.moveTo(36, 36 * i)
        context.lineTo(684, 36 * i)
        context.moveTo(36 * i, 36)
        context.lineTo(36 * i, 684)
        context.stroke()
    }
    if (gameStore.isMe) {
        style2.value = { opacity: 1 }
    } else {
        style1.value = { opacity: 1 }
    }
}

const drawBack = () => {
    for (let i = 0; i < 19; i++) {
        for (let j = 0; j < 19; j++) {
            if (circles[i][j] === 1) {
                context.beginPath()
                context.fillStyle = 'black'
                context.arc((j + 1) * 36, (i + 1) * 36, 17, 0, 2 * Math.PI)
                context.fill()
            } else if (circles[i][j] === 2) {
                context.beginPath()
                context.fillStyle = 'white'
                context.arc((j + 1) * 36, (i + 1) * 36, 17, 0, 2 * Math.PI)
                context.fill()
            }
        }
    }
}

onMounted(() => {
    gameStore.isMe = true
    initCanvas()
    if (!CategoryStore.getWS) {
        openWS()
        CategoryStore.getWS = true
        circles = [...gameStore.gameData]
        if (circles.length === 0) {
            circles = Array.from({ length: 19 }, () => Array(19).fill(0))
        }
        drawBack()
    }
})

onUnmounted(() => {
    clearInterval(timer)
})
</script>

<template>
    <div class="goback" @click="goback()">
        返回大厅
    </div>
    <div style="display: flex;position: relative;width: 1120px;height: 720px;">
        <div class="player-panel">
            <div class="player-card">
                <div class="turn-indicator-white" :style="style1"></div>
                <img class="player-img" :src="imgs[0].src" alt="">
                <div class="player-name">白方</div>
            </div>
            <div class="player-card">
                <div class="turn-indicator-black" :style="style2"></div>
                <img class="player-img" :src="imgs[1].src" alt="">
                <div class="player-name">黑方</div>
            </div>
        </div>

        <div class="chessboard">
            <canvas ref="canvas1" class="canvas1"></canvas>
            <div class="timeBox">
                <i class="fa-solid fa-hourglass-half time-icon"></i>
                <div class="time">倒计时:{{ gameStore.time }}</div>
            </div>
        </div>
    </div>

    <div class="winbox" v-if="gameStore.win !== 0">
        <span class="center-text">游戏结束</span>
    </div>

</template>

<style scoped>
.goback {
    position: fixed;
    top: 20px;
    left: 20px;
    background: rgba(255, 248, 220, 0.85);
    border: 1px solid rgba(210, 180, 90, 0.3);
    border-radius: 25px;
    padding: 8px 12px;
    cursor: pointer;
    z-index: 100;
}

.player-panel {
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.player-card {
    background: rgba(255, 248, 220, 0.85);
    border: 1px solid rgba(210, 180, 90, 0.3);
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 180px;
    text-align: center;
    padding: 15px;
    position: relative;
}

.player-img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-top: 8px;
}

.player-name {
    margin-top: 6px;
    font-weight: bold;
    color: #5b4636;
}

.turn-indicator-black {
    position: absolute;
    top: -15px;
    left: 100%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    background: black;
    padding: 4px 12px;
    border-radius: 50%;
    color: white;
    font-weight: bold;
    font-size: 14px;
    border: 1px white solid;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.turn-indicator-white {
    position: absolute;
    top: -15px;
    left: 100%;
    width: 30px;
    height: 30px;
    transform: translateX(-50%);
    background: white;
    padding: 4px 12px;
    border-radius: 50%;
    color: white;
    font-weight: bold;
    border: 1px black solid;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.chessboard {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 720px;
    height: 720px;
    background-color: #FAF3D0;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(139, 105, 20, 0.15);
    border: 1px solid rgba(210, 180, 90, 0.4);
}

.canvas1 {
    width: 100%;
    height: 100%;
}

.timeBox {
    background-color: red;
    position: absolute;
    top: 0px;
    right: -210px;
    height: 50px;
    width: 200px;
    background: rgba(255, 248, 220, 0.85);
    border: 1px solid rgba(210, 180, 90, 0.3);
    border-radius: 25px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    padding-left: 12px;
}

.time,
.time-icon {
    color: #5b4636;
}

.winbox {
    background: rgba(255, 248, 220, 0.95);
    border: 1px solid rgba(210, 180, 90, 0.3);
    border-radius: 15px;
    color: #5b4636;
    font-weight: bold;
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.center-text {
    position: absolute;
    font-size: 20px;
}
</style>
